{% extends "base.html" %}

{% block title %}近日均价 - 惠农平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-clock me-2"></i>农产品近日均价</h3>
            </div>
            <div class="card-body">
                <!-- 筛选条件 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label for="recentTypeSelect" class="form-label">产品类型</label>
                        <select class="form-select" id="recentTypeSelect">
                            <option value="蔬菜" selected>蔬菜</option>
                            <option value="水果">水果</option>
                            <option value="粮食">粮食</option>
                            <option value="油料">油料</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="recentDaysSelect" class="form-label">统计天数</label>
                        <select class="form-select" id="recentDaysSelect">
                            <option value="7" selected>最近7天</option>
                            <option value="15">最近15天</option>
                            <option value="30">最近30天</option>
                            <option value="60">最近60天</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="button" class="btn btn-primary" onclick="initRecentPrices()">
                            <i class="fas fa-refresh me-1"></i>刷新数据
                        </button>
                    </div>
                </div>

                <!-- 图表容器 -->
                <div class="chart-container">
                    <div id="recentPricesChart" style="width: 100%; height: 500px;"></div>
                </div>

                <!-- 价格趋势卡片 -->
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-success">今日均价</h5>
                                <h3 class="text-primary">¥4.5</h3>
                                <p class="text-muted">较昨日 <span class="text-success">+2.3%</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-success">本周均价</h5>
                                <h3 class="text-primary">¥4.3</h3>
                                <p class="text-muted">较上周 <span class="text-success">+1.8%</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-success">本月均价</h5>
                                <h3 class="text-primary">¥4.1</h3>
                                <p class="text-muted">较上月 <span class="text-warning">-0.5%</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-success">价格波动</h5>
                                <h3 class="text-primary">±5.2%</h3>
                                <p class="text-muted">波动范围</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 详细数据表格 -->
                <div class="mt-4">
                    <h5><i class="fas fa-table me-2"></i>详细价格数据</h5>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>平均价格</th>
                                    <th>最低价格</th>
                                    <th>最高价格</th>
                                    <th>交易量</th>
                                    <th>价格变化</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2024-01-15</td>
                                    <td>¥4.5</td>
                                    <td>¥4.2</td>
                                    <td>¥4.8</td>
                                    <td>1,250kg</td>
                                    <td><span class="text-success">+2.3%</span></td>
                                </tr>
                                <tr>
                                    <td>2024-01-14</td>
                                    <td>¥4.4</td>
                                    <td>¥4.1</td>
                                    <td>¥4.7</td>
                                    <td>1,180kg</td>
                                    <td><span class="text-success">+1.1%</span></td>
                                </tr>
                                <tr>
                                    <td>2024-01-13</td>
                                    <td>¥4.3</td>
                                    <td>¥4.0</td>
                                    <td>¥4.6</td>
                                    <td>1,120kg</td>
                                    <td><span class="text-warning">-0.5%</span></td>
                                </tr>
                                <tr>
                                    <td>2024-01-12</td>
                                    <td>¥4.4</td>
                                    <td>¥4.1</td>
                                    <td>¥4.7</td>
                                    <td>1,150kg</td>
                                    <td><span class="text-success">+0.8%</span></td>
                                </tr>
                                <tr>
                                    <td>2024-01-11</td>
                                    <td>¥4.3</td>
                                    <td>¥4.0</td>
                                    <td>¥4.6</td>
                                    <td>1,100kg</td>
                                    <td><span class="text-warning">-1.2%</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 说明信息 -->
                <div class="mt-4">
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle me-2"></i>数据说明</h5>
                        <ul class="mb-0">
                            <li>本页面展示了选定农产品的近日价格变化趋势</li>
                            <li>可以选择不同的产品类型和统计时间范围</li>
                            <li>价格变化百分比显示相对于前一天的变化</li>
                            <li>交易量数据反映了市场的活跃程度</li>
                            <li>详细数据表格提供了每日的具体价格信息</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 